Skip to content

Do not adjust logos for viewing in dark mode #679

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Do not adjust logos for viewing in dark mode #679

wants to merge 2 commits into from
+3 −3

Conversation

@agriyakhetarpal
Copy link
Contributor

@agriyakhetarpal agriyakhetarpal commented Nov 19, 2025 •
edited
Loading

The code originating from the PST stylesheets here:

scientific-python-hugo-theme/assets/theme-css/pst/variables/_color.scss

Lines 305 to 320 in 762065e

/* Adjust images in dark mode (unless they have class .only-dark or
* .dark-light, in which case assume they're already optimized for dark
* mode).
*/
img:not(.only-dark, .dark-light) {
filter: brightness(0.8) contrast(1.2);
}
/* Give images a light background in dark mode in case they have
* transparency and black text (unless they have class .only-dark or .dark-light, in
* which case assume they're already optimized for dark mode).
*/
.bd-content img:not(.only-dark, .dark-light) {
background-color: rgb(255 255 255);
border-radius: 0.25rem;
}
unfortunately causes the Scientific Python logo and any custom logos provided by users to appear darker and with increased contrast in dark mode. This PR addresses that issue by adding the dark-light class to all logos to ensure compliance with that rule. I view this as a bug and as an unintended side effect of using these stylesheets, as I believe it would be better for us to leave the decision to adjust logos in dark mode to the respective projects through their own stylesheets.

This is another one of the current dark mode issues; xref #618. Another piece of reasoning behind this: our dark mode support is already pretty sensitive, and we don't want projects' logos to inadvertently break WCAG 1.4.3 when switching to dark mode if their colours are very close to the minimum-contrast threshold!

P.S. I thought about removing this code section from the stylesheets I linked above entirely, but since it's coming from the PST, I decided not to, assuming there must be a reason they included it, and deviating from the PST styles in general warrants a separate discussion elsewhere.

BEFORE

image

AFTER

image

@netlify
Copy link

netlify bot commented Nov 19, 2025 •
edited
Loading

✅ Deploy Preview for scientific-python-hugo-theme ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit ffedae4
🔍 Latest deploy log https://app.netlify.com/projects/scientific-python-hugo-theme/deploys/692f80801b38270007f3d2a5
😎 Deploy Preview https://deploy-preview-679--scientific-python-hugo-theme.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 93
Accessibility: 100
Best Practices: 100
SEO: 91
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@stefanv stefanv added the type: Bug fix Something isn't working label Dec 2, 2025
@stefanv
Copy link
Member

stefanv commented Dec 3, 2025

Should we not perhaps avoid adjusting image contrast overall?

@agriyakhetarpal
Copy link
Contributor Author

agriyakhetarpal commented Dec 3, 2025

Likely, yes. I don't know the basis for adding that CSS rule to the PST was, though. It would indeed be nice not to adjust image contrast at all. However, I'm still inclined to discuss this separately, as it comes from an external stylesheet, and it would be better for us that if we deviate from the PST's stylesheets, we document it somehow...

Also, this is currently less of a breaking change than expected right now (it caught no one else's eye, for one :P), and part of that is also because none of the websites (besides ours at PyBaMM) have had dark mode enabled by default anyway.

@stefanv
Copy link
Member

stefanv commented Dec 3, 2025

OK, so would you like to proceed with this change then?

@agriyakhetarpal
Copy link
Contributor Author

agriyakhetarpal commented Dec 3, 2025

For now, yes! I'll open another issue about removing these dark mode image contrast modifications in general.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

type: Bug fix Something isn't working

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@agriyakhetarpal @stefanv